<template>
  <view>
    <view class="start2">
      <view class="con">
        <!-- 			<view class="tip_text">
					<view class="txt1">请完善资料</view>
					 <view class="txt2">会让大家更想认识你！</view>
				</view> -->

      <!-- #ifdef MP-WEIXIN -->
        <button
          class="user_hd"
          v-if="!HeadImgUrl"
          hover-class="none"
					open-type="chooseAvatar"
          @chooseavatar="chooseavatar"
        >
          <view>
            上&nbsp;传<br>
            头&nbsp;像
          </view>
          <image
            class="cimg"
            src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17134979213041479.png"
            mode="widthFix"
          ></image>
        </button>
        <button class="user_hd" v-else hover-class="none" open-type="chooseAvatar" @chooseavatar="chooseavatar">
          <image class="hd_img" :src="HeadImgUrl" mode="aspectFill" />
        </button>
        <!-- #endif -->
        <!-- #ifdef APP-PLUS -->
        <button
          class="user_hd"
          v-if="!HeadImgUrl"
          hover-class="none"
          @click="appchooseavatar"
        >
          <view>
            上&nbsp;传<br>
            头&nbsp;像
          </view>
          <image
            class="cimg"
            src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17134979213041479.png"
            mode="widthFix"
          ></image>
        </button>
        <button class="user_hd" v-else hover-class="none" @click="appchooseavatar">
          <image class="hd_img" :src="HeadImgUrl" mode="aspectFill" />
        </button>
        <!-- #endif -->
        <view class="tips" :class="{noneShow:isShow}">温馨提示：必须是真人头像</view>
        <view class="input_box">
          <view class="titlebox">
            <!-- <text class="must">*</text> -->
            <text class="username">昵称</text>
          </view>
          <view class="numTextInput">
            <text class="numText" :class="{ numTextColor: Name.length == 10 }"
              >{{ Name.length }}/10</text
            >
            <input
              :class="isName ? 'redborder' : ''"
              type="nickname"
              v-model="Name"
              placeholder-class="placename"
              placeholder="请填写您的昵称"
              maxlength="10"
            />
          </view>
        </view>
        <!-- <view class="group" @click="showBirthday = true">
					<view class="lab">生日</view>
					<view class="inp_box">
						<input type="text" v-model="Birthday" disabled placeholder="选择生日" />
					</view>
					<view class="icon_box"><uni-icons type="right" size="18" color="#E7E7E7"></uni-icons></view>
				</view> -->
        <view class="input_box">
          <view class="titlebox">
            <!-- <text class="must">*</text> -->
            <text class="username">请选择您的性别(设置后不可更改)</text>
          </view>
          <view class="sexbox">
            <view
              class="sextitle"
              :class="{ tab4: sexnum == 0 }"
              @click="checkSexChange(0)"
            >
              <image
                class="seximg"
                v-if="sexnum == 0"
                src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1717047806649702.png"
              ></image>
              <image
                class="seximg"
                v-else
                src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1713504752895497.png"
              ></image>
              <text class="man" :class="{ text4: sexnum == 0 }">男</text>
            </view>
            <view
              class="sextitle"
              :class="{ tab4: sexnum == 1 }"
              @click="checkSexChange(1)"
            >
              <image
                class="seximg"
                v-if="sexnum == 1"
                src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17170475059821483.png"
              ></image>
              <image
                class="seximg"
                v-else
                src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1713504766833808.png"
              ></image>
              <text class="man" :class="{ text4: sexnum == 1 }">女</text>
            </view>
          </view>
          <!-- <radio-group v-model='Sex' @change="checkSexChange" class="checkbox-class">
						<label>
							<radio value="男" />男
							<radio class="item_e" value="女" />女
						</label>
					</radio-group> -->
        </view>
      </view>
    </view>

    <view class="start5">
      <view class="con">
        <view class="text1">上传1-3张展示照片</view>
        <view class="imglistbox">
          <view class="imglist">
            <view class="item_box" v-for="(item, index) in images" :key="index">
              <image :src="item" mode="aspectFill" />
              <view class="del_con" @click="delImg(index)">
                <uni-icons type="closeempty" color="#fff" size="16"></uni-icons>
              </view>
            </view>
            <view class="item_box" @click="selectImg" v-if="images.length < 3">
              <image
                src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17117084387991289.png"
                mode="aspectFill"
              />
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- <view class="start5">
			<view class="con">

				<block v-if="!is_have_pid">
					<view class="searbox">
						<view class="text1"> 推荐人（选填）</view>
						<view class="input_box">
							<input type="text" v-model="RecommendName" placeholder-class="placerec" disabled placeholder="请填写您的推荐人" @click="openSearchUserWin()">
						</view>
					</view>
					
				</block>
				<view class="text1"> 从哪知晓我们挥友（选填）</view>
				<view class="in_box">
					<radio-group  class="checkbox-class">
						<view style="display: flex;" v-for="(item,index) in adChannelList" :key="index">
							<radio color="#0D0D0D"  :checked="item.id==radioValue"  @click="checkboxChange(item)" />
							<view class="name">{{item.name}}</view>
						</view>
					</radio-group>
				</view>
			</view>
		</view> -->
    <view class="btn3" @click="sub"> 下一步 </view>
    <!-- <view class="btn3" @click="nav_to('/pages/start/skitype')">
			下一步
		</view> -->
    <canvas
      canvas-id="tranCanvas"
      class="tranCanvas"
      :style="{ width:canvasWidth+'px',height: canvasHeight + 'px' }"
    ></canvas>
    <view style="height: 92rpx"></view>
    <!-- <view class="pre_step" @click="back_to()">返 回</view> -->
    <uni-popup ref="search_user" type="bottom">
      <view class="popupbox">
        <view class="title"> 搜索推荐人 </view>
        <view class="sear">
          <input
            type="text"
            v-model="searVal"
            placeholder="昵称/手机号/ID号"
            @confirm="searchUser"
          />
          <view class="icon" @click="searchUser">
            <image src="@/static/img/search.png" mode=""></image>
          </view>
        </view>
        <scroll-view class="scroll" scroll-y>
          <view v-if="Array.isArray(userArr) && userArr.length > 0">
            <view
              class="item"
              v-for="item in userArr"
              :key="item.ID"
              @click="selectUser(item)"
            >
              <view class="cover">
                <image :src="item.HeadImgUrl" mode="aspectFill" />
              </view>
              <view class="name">
                {{ $util.entitiesToUtf16(item.Name) || "匿名" }}
                <view
                  class="member member_he"
                  v-if="getUserType(item.UserType) == 1"
                  >黑金年卡</view
                >
                <view
                  class="member member_he"
                  v-if="getUserType(item.UserType) == 2"
                  >黑金卡</view
                >
                <view
                  class="member number_huan"
                  v-if="getUserType(item.UserType) == 3"
                  >金卡</view
                >
              </view>
            </view>
          </view>
          <view
            class="item"
            v-else
            style="
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
            "
          >
            暂无该会员信息
          </view>
        </scroll-view>
      </view>
    </uni-popup>
    <u-datetime-picker
      immediateChange
      ref="datetimePicker"
      @cancel="showBirthday = false"
      :show="showBirthday"
      :minDate="minDate"
      :maxDate="maxDate"
      mode="date"
      v-model="nowDate"
      @confirm="setBirthday"
    ></u-datetime-picker>
  </view>
</template>

<script>
import { ieChooseImage,isCheckImage } from "../../common/imgExamine";
export default {
  data() {
    let d = new Date("1923/1/1");
    let nowD = new Date().getTime();
    return {
      isHeadImgUrl: false,
      isName: false,
      Birthday: "",
      minDate: d.getTime(),
      maxDate: nowD,
      nowDate: nowD,
      showBirthday: false,
      sexnum: 0,
      radioValue: null,
      HeadImgUrl: "",
      Name: "",
      Sex: "男",
      comData: {
        Content: "",
        Images: "",
        CompanyID: 6002,
        CatalogID: 0,
        Title: "",
        IsVideo: 0,
      },
      localList: [],
      images: [],
      City: "",
      Province: "",
      PID: 0,
      RecommendName: "",
      AdChannel: "",

      searVal: "",
      userArr: [],
      is_have_pid: false,

      checkedList: [],
      adChannelList: [
        {
          id: "1",
          name: "微信",
        },
        {
          id: "2",
          name: "抖音",
        },
        {
          id: "3",
          name: "小红书",
        },
        {
          id: "4",
          name: "其他",
        },
      ],
      canvasWidth:0,
      canvasHeight:0,
      lineBgHeight: "",
      logoImgInfo: {},
      isShow:false,
    };
  },
  async onLoad() {
    let res = await this.$api.post("/Common/Add_ViewPath", {
      Path: "start2",
      Platform: uni.getStorageSync("platform"),
    });
    let pid = uni.getStorageSync("pid") || uni.getStorageSync("user").PID;
    this.PID = pid;

    console.log("PID===" + this.PID);

    if (this.PID > 0) {
      this.is_have_pid = true;
    }

    await this.getCity();
    // this.getLogo();
  },
  watch: {
    Name() {
      this.isName = false;
    },
    HeadImgUrl() {
      this.isHeadImgUrl = false;
    },
  },
  methods: {
    async setBirthday(e) {
      console.log(e.value);
      this.Birthday = await uni.$u.date(e.value, "yyyy-mm-dd");
      this.showBirthday = false;
    },
    checkboxChange(item) {
      if (this.radioValue == item.id) {
        this.radioValue = null;
      } else {
        this.radioValue = item.id;
      }
    },
    checkSexChange(i) {
      this.sexnum = i;
      console.log(this.sexnum);
      if (i == 0) {
        this.Sex = "男";
      } else {
        this.Sex = "女";
      }
    },
    openSearchUserWin() {
      this.$refs.search_user.open();
    },
    async searchUser() {
      let user_res = await this.$api.post("/Member/Search", {
        Name: this.searVal,
      });

      this.userArr = user_res.data;
    },
    selectUser(item) {
      this.PID = item.ID;
      this.RecommendName = this.$util.entitiesToUtf16(item.Name);

      this.$refs.search_user.close();
    },
    delImg(index) {
      this.images.splice(index, 1);
      this.localList.splice(index, 1);
    },

    getLocationSysc() {
      let _this = this;
      return new Promise((resolve, reject) => {
        uni.getLocation({
          type: "gcj02",
          success: function (res) {
            resolve(res);
          },
          fail: function (err) {
            const defaultLocation = {
              latitude: 0,
              longitude: 0,
            };
            resolve(defaultLocation);
          },
        });
      });
    },

    async getCity() {
      let loc = await this.getLocationSysc();
      let longitude = loc.longitude;
      this.longitude = loc.longitude;
      let latitude = loc.latitude;
      this.latitude = loc.latitude;
      let o = {
        longitude,
        latitude,
      };
      let res = await this.$util.getAddress(o);

      this.Province = res.result.address_component.province;
      this.City = res.result.address_component.city;
    },

    async sub() {
      if (!this.HeadImgUrl) {
        this.isHeadImgUrl = true;
        this.$pv.msg("请上传头像");
        return;
      }

      if (!this.Name) {
        this.isName = true;
        this.$pv.msg("请输入昵称");
        return;
      }

      if (!this.Sex) {
        this.$pv.msg("请选择性别");
        return;
      }

      if (this.localList.length == 0) {
        this.$pv.msg("您还未上传1~3张展示照片!");
        return;
      }

      // let res = await this.$api.post('/Member/Create', {
      const data = {
        Sex: this.Sex,
        Province: this.Province,
        City: this.City,
        VideoUrl: "",
        IsVideo: 0,
        HeadImgUrl: this.HeadImgUrl,
        UserImgs: this.HeadImgUrl,
        Descript: "",
        Phone: "",
        IDCard: "",
        TrueName: "",
        Name: this.Name,
        WechatNo: "",
        Height: 0,
        Weight: 0,
        Income: 0,
        IsMemberShow: 1,
        PID: this.PID,
        AdChannel: this.AdChannel,
        Birthday: this.Birthday,
        localList: this.localList,
      };
      this.$store.commit("setSign", data);
      this.nav_to("/pages/start/skitype");
    },

    async chooseavatar(e) {
      console.log('11111');
       let o = {
								ID: "",
								duration: 0,
								fileType: 'image',
								tempUrl: e.detail.avatarUrl,
								flieUrl: e.detail.avatarUrl,
								tempKey: uni.$u.guid(8),
								pro: 0,
								netPath: "",
							};
							let r = await this.uploadingList(o.flieUrl, o.tempKey,
								new Date().getTime() - 500);
							this.HeadImgUrl = r;
							this.isHeader = true;


				//  try {
				// 	let _this = this;
				// 	let pathlist = [{path:e.detail.avatarUrl}]
				// 	let res = await isCheckImage(pathlist,'all')
				// 	if (res[0]?.code == 0) {
				// 		_this.HeadImgUrl = res[0]?.url;
				// 		_this.isHeadImgUrl = true;
        //     _this.isShow = true
				// 	} else {
				// 		uni.showToast({
				// 			title: res[0]?.msg,
				// 			icon: "none",
				// 			duration: 2000,
				// 		});
				// 	}
				// } catch (error) {
				// 	this.$pv.msg("图片上传失败");
				// 	console.log(error);
				// }
			},
    async appchooseavatar(e) {
			try {

				let _this = this;
				uni.chooseImage({
					count: 1, //默认9
					mediaType: ['image'],
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择
					success: async function (res) {

						let o = {
							ID: "",
							duration: 0,
							fileType: 'image',
							tempUrl: res.tempFiles[0].path,
							flieUrl: res.tempFiles[0].path,
							tempKey: uni.$u.guid(8),
							pro: 0,
							netPath: "",
						};

						let r = await _this.uploadingList(o.flieUrl, o.tempKey,
							new Date().getTime() - 500);
						_this.HeadImgUrl = r;
						_this.isHeader = true;
					}
				})
			} catch (error) {
				this.$pv.msg('图片上传失败');
				console.log(error);
			}
		},
    selectImg(index) {
      let ind = index >= 0 ? index : -1;
      let _this = this;
      let con;
      let mediaType = ["image"];

      con = 3 - this.images.length;

      uni.chooseImage({
        count: con,
        sourceType: ["album", "camera"],
        maxDuration: 30,
        camera: "back",
        success(res) {
          res.tempFiles.forEach(async (item, index) => {
            let o;

            o = {
              ID: "",
              duration: 0,
              fileType: "image",
              tempUrl: item.path,
              flieUrl: item.path,
              tempKey: uni.$u.guid(8),
              pro: 0,
              netPath: "",
            };

            if (ind == -1) {
              _this.localList.push(o);
            } else {
              _this.localList.splice(ind, 1, o);
            }
            console.log("test111");
            setTimeout(async () => {
              let r = await _this.uploadingList(
                o.flieUrl,
                o.tempKey,
                new Date().getTime() - index * 500
              );
              console.log("执行了");
              console.log(r);
              _this.images.push(r);
            }, index * 150);
          });
        },
      });
    },

    async uploadingList(url, tempKey, timeStamp) {
      const r = await this.$upload(url, pro => {
					this.localList.forEach((item) => {
						if (item.tempKey == tempKey) {
							item.pro = pro;
						}
					});
				})
				this.localList.forEach(item => {
					if (item.tempKey == tempKey) {
						item.netPath = r;
					}
				});
				this.$pv.closeLoad('')
				return r;
    },
  },
  computed: {
    getUserType(l) {
      return (l) => {
        if (l.indexOf("黑金年") != -1) {
          return 1;
        } else if (l.indexOf("黑金") != -1) {
          return 2;
        } else if (l.indexOf("金") != -1) {
          return 3;
        } else {
          return 0;
        }
      };
    },
    checkedValue() {
      if (this.checkedList.length > 0) {
        const selectedItem = this.adChannelList.find(
          (item) => item.id === this.checkedList[0]
        );

        if (selectedItem) {
          return `当前选中项为：${selectedItem.name}`;
        } else {
          return "";
        }
      } else {
        return "";
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background: #ffffff;
}
.group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  margin: 30rpx 0;
  &::after {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 2rpx;
    content: "";
    transform: scaleY(0.6);
    background-color: #e4e4e4;
  }

  .inp_box {
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: row;

    input {
      width: 100%;
      text-align: right;
      color: #999999;
      font-size: 32rpx;
    }
    .radio_s {
      display: flex !important;
      height: 100rpx;
    }
    .item_check {
      padding: 10rpx;
      display: flex;
      flex-direction: row;

      .desc {
        color: #000 !important;
      }
    }
  }

  .icon_box {
    height: 40rpx;
    width: 40rpx;
    line-height: 40rpx;
  }

  .inp_append {
    margin-left: 8rpx;
  }

  .s_btn {
    color: #fff;
    font-size: 24rpx;
    width: 170rpx !important;
    height: 60rpx !important;
    border-radius: 5rpx;
    background-color: #0d0d0d;
    margin: 0 0 0 20rpx;
  }
}
.uni-popup {
  z-index: 9999 !important;
}
button::after {
  border-radius: 0 !important;
  border: 0 !important;
}
.tab4 {
  background-color: #706eee !important;
}
.text4 {
  color: #fff !important;
}
.placerec {
  color: #999999;
  font-size: 32rpx;
  // text-align: right;
}
.placename {
  color: #999999;
  font-size: 32rpx;
  font-weight: 500;
  // text-align: right;
}
.must {
  font-size: 32rpx;
  color: #ef4034;
}
.titlebox {
  display: flex;
  align-items: center;
  .must {
    font-size: 32rpx;
    color: #ef4034;
  }
  .username {
    font-size: 28rpx;
    color: #999999;
    margin-bottom: 10rpx;
  }
}
.con {
  width: 600rpx;
}

.des {
  margin-top: 20rpx;
  line-height: 50rpx;
  text-align: center;
}

.start2 {
  // height: 400rpx;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pre_step {
  width: 100%;
  text-align: center;
  line-height: 120rpx;
  color: #767676;
}

.btn3 {
  width: 670rpx;
  height: 92rpx;
  background: #706eee;
  display: flex;
  border-radius: 44rpx;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 32rpx;
  position: absolute;
  bottom: 20rpx;
  left: 50%;
  transform: translateX(-50%);
}
.start5 {
  margin-top: 25rpx;
  display: flex;
  align-items: center;

  .con {
    width: 100%;
    box-sizing: border-box;
    padding-left: 80rpx;
    padding-right: 80rpx;
    .searbox {
      // display: flex;
      // border-bottom: 1rpx solid #999999;
      align-items: center;
    }
  }

  .text1 {
    font-size: 28rpx;
    color: #999999;
    padding-top: 10rpx;
    padding-bottom: 20rpx;
    height: 40rpx;
  }

  .imglistbox {
    width: 590rpx;
    border-radius: 16rpx;
    box-sizing: border-box;
    margin-top: 20rpx;

    .imglist {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 542rpx;
      flex-wrap: wrap;

      &::after {
        content: "";
        height: 1px;
        width: 33%;
        display: flex;
      }
    }

    .item_box {
      position: relative;
      background-color: #e2e2e2;
      height: 172rpx;
      width: 172rpx;
    }

    image {
      width: 172rpx;
      height: 172rpx;
      // background: #0f0;
    }
  }

  .pre_step {
    width: 100%;
    text-align: center;
    line-height: 120rpx;
    color: #767676;
  }

  .btn1 {
    margin-top: 64rpx;
    width: 590rpx;
    height: 96rpx;
    background: linear-gradient(225deg, #e2e2e2 0%, #b8b8b8 100%);
    box-shadow: 0px 8px 20px 0px rgba(46, 46, 46, 0.4);
    display: flex;
    border-radius: 12rpx;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 36rpx;
  }

  .text3 {
    margin-top: 48rpx;
    color: #9d9d9d;
    font-size: 40rpx;
    line-height: 56rpx;
  }

  .video_box {
    position: relative;
    margin-top: 38rpx;
    width: 590rpx;
    height: 360rpx;

    video {
      width: 590rpx;
      height: 360rpx;
    }
  }

  .del_con {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.4);
    height: 40rpx;
    width: 40rpx;
    text-align: center;
    line-height: 40rpx;
    border-radius: 0 16rpx 0 16rpx;
  }
}

.tip_text {
  position: relative;
  height: 160rpx;

  .txt1 {
    height: 80rpx;
    font-size: 64rpx;
    color: #0a0a0a;
  }

  .txt2 {
    position: absolute;
    width: 700rpx;
    height: 80rpx;
    font-size: 64rpx;
    color: #0a0a0a;
  }
}

.user_hd {
  margin-top: 28rpx;
  margin-left: auto;
  margin-right: auto;
  width: 200rpx;
  height: 200rpx;
  background: #f6f6f6;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: visible !important;
  >view{
    line-height: 1.5;
  }
  .redborder {
    border: 4rpx solid red;
    border-radius: 50%;
  }
  .icon {
    height: 200rpx;
    width: 200rpx;
    border-radius: 50%;
  }
  .cimg {
    width: 52rpx;
    height: 52rpx;
    position: absolute;
    right: 10rpx;
    bottom: 0;
  }
  .hd_img {
    height: 100%;
    width: 100%;
    border-radius: 50%;
  }
}

.input_box {
  margin-bottom: 40rpx;
  .numTextInput {
    position: relative;
    .numText {
      font-size: 28rpx;
      color: #999999;
      position: absolute;
      right: 15rpx;
      bottom: 15rpx;
      position: absolute;
      right: 20rpx;
      top: 50%;
      transform: translateY(-50%);
    }
    .numTextColor {
      color: red;
    }
  }
  .redborder {
    border: 1rpx solid red;
  }
  .sexbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .sextitle {
      width: 292rpx;
      height: 96rpx;
      background-color: #f6f6f6;
      text-align: center;
      line-height: 96rpx;
      border-radius: 16rpx;
      .seximg {
        width: 40rpx;
        height: 40rpx;
        vertical-align: middle;
        margin-right: 8rpx;
      }
      .man {
        font-size: 32rpx;
        color: #333333;
      }
    }
  }
  input {
    height: 80rpx;
    line-height: 80rpx;
    color: #000;
    // text-align: right;
    border: 2rpx solid #e4e4e4;
    box-sizing: border-box;
    padding: 0 36rpx;
  }

  .checkbox-class {
    height: 80rpx;
    line-height: 80rpx;
    color: #333333;
    .item_e {
      margin-left: 32rpx;
    }
  }

  checkbox {
    height: 70rpx;
    line-height: 70rpx;
    color: #000;
  }

  .input-placeholder,
  .textarea-placeholder {
    color: #999;
  }
}

.in_box {
  margin-top: 5rpx;
  //height: 80rpx;
  //line-height: 80rpx;
  //text-align: center;

  input {
    height: 70rpx;
    line-height: 70rpx;
    color: #000;
  }

  .checkbox-class {
    // height: 210rpx;
    line-height: 60rpx;
    color: #000;
    display: flex;
    justify-content: space-between;
    .name {
      font-size: 28rpx;
    }
  }

  checkbox {
    height: 70rpx;
    line-height: 70rpx;
    color: #000;
  }

  .input-placeholder,
  .textarea-placeholder {
    color: #999;
  }
}

.btn1 {
  margin-top: 54rpx;
  width: 590rpx;
  height: 100rpx;
  background: linear-gradient(225deg, #020202 0%, #363636 100%);
  box-shadow: 0px 4rpx 16rpx 0px rgba(46, 46, 46, 0.4);
  border-radius: 12rpx;
  opacity: 0.9;
  color: #fff;
  font-size: 36rpx;
  line-height: 100rpx;
}

.btn2 {
  line-height: 100rpx;
  margin-top: 32rpx;
  width: 590rpx;
  height: 100rpx;
  box-shadow: 0px 4rpx 16rpx 0px rgba(46, 46, 46, 0.4);
  border-radius: 12rpx;
  border: 1px solid #0a0a0a;
  background: #fff;
  box-sizing: border-box;
}

.popupbox {
  background-color: #fff;
  border-top-left-radius: 26rpx;
  border-top-right-radius: 26rpx;
  padding: 20rpx 32rpx;
  padding-bottom: 70rpx;

  .title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 24rpx;
    color: #6f6f6f;
  }

  .sear {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    background-color: #fff;
    border-radius: 20rpx;
    box-shadow: 0 0 8rpx #ccc;

    .icon {
      padding: 10rpx 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      image {
        width: 34rpx;
        height: 34rpx;
      }
    }

    input {
      color: #6f6f6f;
      padding: 10rpx 10rpx 10rpx 20rpx;
      flex: 1;
    }
  }

  .scroll {
    width: 100%;
    height: 30vh;
    box-sizing: border-box;

    .item {
      display: flex;
      padding: 20rpx 0;
      height: 100rpx;

      border-bottom: 2rpx solid #eee;

      .cover {
        height: 100rpx;
        width: 100rpx;
        border-radius: 50%;
        overflow: hidden;
        border: 1px solid #333;

        image {
          height: 100%;
          width: 100%;
        }
      }

      .name {
        color: #6f6f6f;
        line-height: 52px;
        height: 52rpx;
        padding: 0rpx 0 0 20rpx;

        .member {
          display: inline-block;
          width: 68rpx;
          height: 32rpx;
          background: linear-gradient(135deg, #7e7e7e 0%, #292929 100%);
          border-radius: 2px;
          border: 2px solid #d6c6ab;
          text-align: center;
          color: #fff;
          font-size: 16rpx;
          line-height: 32rpx;
          margin-left: 20rpx;
        }

        .number_huan {
          color: #4c310c;
          background: linear-gradient(180deg, #fdf9f6 0%, #e1c4a6 100%);
          border: 2rpx solid #e6ceb5;
        }
      }
    }

    .item:last-child {
      border: 0;
    }

    .item:first-child {
      padding-top: 0;
    }
  }
}
.tranCanvas {
  width: 200vw;
  height: 200vh;
  opacity: 0;
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-200%, -200%);
  box-sizing: border-box;
}
.tips{
  min-height: 40rpx;
  margin: 20rpx 0;
  opacity: 1;
  font-size: 26rpx;
  text-align: center;
  color: rgb(122, 118, 118);
  transition: .5s;
}
.noneShow{
  opacity: 0;
  transition: .5s;
}
</style>